<template>
    <div style="padding: 20px;box-sizing: border-box;background: #fff;">
        <div style="display: flex;justify-content: space-between;">
            <div class="title">
                <div>字典管理</div>
            </div>
            <el-button type="primary" @click="handleAdd" style="margin-bottom: 10px">+ 新增</el-button>
        </div>
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="listBox">
                    <div @click="selectFun1(index)" :class="indexSelect1 == index?'divSelect':''" v-for="item,index in list1">{{item.name}}</div>
                </div>
                
            </el-col>
            <el-col :span="4">
                <div class="listBox">
                    <div @click="selectFun2(index)" :class="indexSelect2 == index?'divSelect':''" v-for="item,index in list2">{{item.snName}}</div>
                </div>
              </el-col>
            <el-col :span="17">
                <avue-crud :data="data" :option="options" @search-change="searchChange" @search-reset="searchReset">

                    <template slot-scope="{row,index}" slot="menu">
                        <el-button v-if="row.enableFlag" type="text" size="small"
                            @click="rowEnable(row,index)">禁用</el-button>
                        <el-button v-else type="text" size="small" @click="rowEnable(row,index)">启用</el-button>

                        <el-button type="text" size="small" @click="rowDel(row,index)"> 删除</el-button>
                    </template>
        
                </avue-crud>
            </el-col>
         </el-row>       
        <el-dialog :title="dialogTitle" :visible.sync="dicAddVisible" width="500px" :show-close="false">
            <avue-form ref="dicForm" :option="formOption" v-model="form">

            </avue-form>
            <div class="operateBtn">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleAddSubmit">保存</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<script>
    import options from "@/const/mgmt/sys/dic";
    import { dicIdList } from "@/api/com";
    import { getDicList, dicMenu,dicAdd,dicDel,disableDic,enableDic} from "@/api/mgmt/sys/dic";


    export default {
        components: {
        },
        data() {

            return {
                indexSelect1:0,
                indexSelect2:0,
                list1: [
                    { name: '挂号', value: 1 },
                    { name: '门诊', value: 2 },
                    { name: '住院', value: 3 },
                    { name: '收费', value: 4 },
                    { name: '药品', value: 5 },
                    { name: '系统', value: 6 },
                ],
                list2:[],
                options: options,
                data: [],
                query: {
                    searchContext: '',

                },
                loading: false,
                //新增修改属性
                dicAddVisible: false,
                dialogTitle: '',
                defaultFrom: {
                },
                dialogType: 'add',
                form:{},
                formOption: {
                    emptyBtn: false,
                    submitBtn: false,
                    column: [
                        {
                            label: '名称',
                            prop: 'moniker',
                            span: 24,
                        },
                        {
                            label: '代码',
                            prop:'number',
                            span: 24, 
                        }
                    ]
                }
            }
        },
        mounted() {
            this.onLoad();
        },
        methods: {
            handleAddSubmit(){
                
                let data = JSON.parse(JSON.stringify(this.form));
                data.dicId = this.list2[this.indexSelect2].snVal
                dicAdd(data).then(res => {
                    this.$message({
                         type: "success",
                          message: "新增成功!"
                    });
                    this.onLoad();
                    this.handleClose();
                })

            },

            rowEnable(row) {
                this.$confirm(row.enableFlag ? '是否确认停用?' : '是否确认启用?', {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        if(row.enableFlag){
                            disableDic(this.list2[this.indexSelect2].snVal,row.id).then(res => {
                            if (res.success) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!"
                                });
                                this.onLoad();
                            }

                        })
                        }else{
                            enableDic(this.list2[this.indexSelect2].snVal,row.id).then(res => {
                            if (res.success) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!"
                                });
                                this.onLoad();
                            }

                        })
                        }
                       
                      

                    })


            },
            rowDel(row) {
                this.$confirm('是否确认删除?', {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {

                        dicDel(this.list2[this.indexSelect2].snVal,row.id).then(res => {
                            if (res.success) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!"
                                });
                                this.onLoad();
                            }

                        })

                    })
            },
            handleClose() {
                this.$refs.dicForm.resetForm();
                this.dicAddVisible = false;
                

            },
            handleAdd() {
                this.dialogTitle = '新增';
                this.dialogType = 'add'
                this.dicAddVisible = true;


            },
           

            searchReset() {
                this.query = {};
                this.onLoad();
            },
            searchChange(params, done) {
                this.query = params;
                this.onLoad(params);
                done();
            },
            selectFun1(index){
                this.indexSelect1 = index;
                this.indexSelect2 =  0;
                this.menuFun()
            },
            selectFun2(index){
                this.indexSelect2 = index;
                this.dicListFun()
            },
            onLoad() {
                this.menuFun();
            },
           menuFun(){
                dicMenu(this.list1[this.indexSelect1].value).then(res => {
                    this.list2 = res.list;

                    this.dicListFun()
                })
            },
           dicListFun(){
                this.loading = true;
                this.query._page = 1;
                this.query._limit = 100000;
                this.query.dicId = this.list2[this.indexSelect2].snVal
                getDicList(this.query).then(res => {
                    this.data = res.list;
                    this.loading = false;
                })
           }
           

        }



    }
</script>
<style scoped>
    .operateBtn{
        display: flex;
        justify-content: center;
    }
    .title {
        padding-left: 10px;
        border-left: 4px solid #DC402B;
        margin-bottom: 22px;
    }

    .sendBtn {
        margin: 0px auto 0;
        display: flex;
        justify-content: center;
    }
    .listBox{
        height: 70vh;
        overflow-y: auto;
    }
    .listBox>div{
        font-size: 14px;
        padding: 12px 0 ;
        text-align: center;
        cursor: pointer; 
    }
    .divSelect{
        background: #1890FF;
       
        color: #fff;
    }
</style>